<template>
	<view class="qxlj_back4 contain">
		<view class="center_title">
			<view class="con_box">
				<view class="con_img">
					<image :src="headImg" mode=""></image>
				</view>
				<view class="sun_text">
					<view class="one">
						<view class="name">{{name}}</view>
					</view>
					<!-- <view class="two">开心生活每一天</view> -->
					<view class="two"></view>
				</view>
				<view class="sz_img">
					<image :src="imgUrl+'upload/img/ws_static/static/userimg/jf.png'" mode=""></image>
					<view class="js_all">
						<view>{{$t('signin.header.points', {points: userIntegral})}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 签到内容 -->
		<view class="contain_box">
			<view class="title">
				<view class="one">
					{{$t('signin.signIn.title')}}
				</view>
				<view class="two" @click="goDetail">
					<view class="" style="text-align: center">
						{{$t('signin.signIn.viewRules')}}
					</view>
				</view>
			</view>

			<view class="jf_box">
				<view class="item_qd" v-for="(item,index) in sigList" :key="index" :class="item.status?'':'item_wqd'">
					<view class="item_center" @click="postInfoSign(item.yes)">
						<view class="day">{{$t(`signin.days.day${index + 1}`)}}</view>
						<!-- <view class="pic">
							<image v-if="item.status" src="/static/userimg/qiandao.png" mode=""></image>
							<image v-else src="/static/userimg/qiandaoT.png" mode=""></image>
						</view> -->
						<view class="num">
							<template v-if="item.status && !item.yes">{{$t('signin.days.signed')}}</template>
							<template v-else-if="item.yes">点击签到</template>
							<template v-else>{{item.num}}</template>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserSignIn,
		getUserSignInPost
	} from '@/api/qxlj.js';
	import {
		getUserIntegral,
		getChildren
	} from '@/api/homePage.js';
	import Config from "@/config";
	export default {
		data() {
			return {
				imgUrl: Config.imgUrl,
				name: '',
				headImg: '',
				userIntegral: 0,
				myUser: '',
				sigList: [{
					day: '第一天',
					num: '+1',
					status: false,
					yes: false,
				}, {
					day: '第二天',
					num: '+1',
					status: false,
					yes: false,
				}, {
					day: '第三天',
					num: '+1',
					status: false,
					yes: false,
				}, {
					day: '第四天',
					num: '+1',
					status: false,
					yes: false,
				}, {
					day: '第五天',
					num: '+1',
					status: false,
					yes: false,
				}, {
					day: '第六天',
					num: '+1',
					status: false,
					yes: false,
				}, {
					day: '第七天',
					num: '+21',
					status: false,
					yes: false,
				}],
			}
		},
		onLoad() {
			// 设置导航栏标题
			uni.setNavigationBarTitle({
				title: this.$t('signin.title')
			})

			let data = this.$store.state.base.userInfo
			this.name = data.Name;
			this.headImg = data.HeadImg;
			this.getUserCenter();
			this.getGLDate();
			this.getIntegral()
		},
		watch: {
			// 监听语言变化，更新导航栏标题
			'$i18n.locale'() {
				uni.setNavigationBarTitle({
					title: this.$t('signin.title')
				})
			}
		},
		methods: {
			// 积分
			async getIntegral() {
				try {
					const {
						Data
					} = await getUserIntegral({});
					this.userIntegral = Data;
				} catch (e) {
					console.error('获取积分失败:', e);
				}
			},
			goDetail() {
				uni.navigateTo({
					url: "/pages/article/index?id=4778&readOnly=true"
				})
			},
			//获取签到规则
			async getGLDate() {
				uni.showLoading({});
				try {
					const Data = await getChildren({
						ArticleCategoryId: 3406,
					})
					uni.hideLoading();
					this.linkUrl = Data.Data[0].LinkUrl;
				} catch (e) {

				}
			},
			//提交签到信息
			async postInfoSign(e) {
				if (e) {
					try {
						const {
							Data
						} = await getUserSignInPost({});
						uni.showToast({
							title: this.$t('signin.signIn.success'),
							icon: 'success',
							duration: 2000
						});
						this.getUserCenter();
						this.getIntegral();
					} catch (e) {
						//TODO handle the exception
						uni.showToast({
							title: this.$t('signin.signIn.duplicate'),
							icon: 'error',
							duration: 2000
						});
					}
				} else {
					uni.showToast({
						title: this.$t('signin.signIn.duplicate'),
						icon: 'error',
						duration: 2000
					});
				}
			},
			//获取当前用户签到信息
			async getUserCenter() {
				try {
					const {
						Data
					} = await getUserSignIn({});
					this.myUser = Data;
					// 先重置所有yes
					this.sigList.forEach(item => item.yes = false);

					if (Data.SignStatus == 0) {
						// 今天未签到
						for (let i = 0; i < Data.SignContinuousDays; i++) {
							this.sigList[i].status = true;
						}
						this.sigList[Data.SignContinuousDays].status = true;
						this.sigList[Data.SignContinuousDays].yes = true;
					} else {
						// 今天已签到
						for (let i = 0; i < Data.SignContinuousDays; i++) {
							this.sigList[i].status = true;
						}
						// 不设置任何yes
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.contain {
		width: 100%;
		min-height: 100vh;
		background: #F5F6F7;
	}

	.center_title {
		width: 100%;
		height: 400rpx;
		position: relative;
		overflow: hidden;
		background: linear-gradient(135deg, #498FFF 0%, #2B5BA1 100%);

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100rpx;
			background: linear-gradient(to bottom, transparent, #F5F6F7);
		}
	}

	//顶部内容
	.con_box {
		width: 92%;
		display: flex;
		align-items: center;
		margin: 0 4%;
		position: absolute;
		top: 12%;
		left: 0;
		color: #fff;
		z-index: 1;

		.con_img {
			width: 140rpx;
			height: 140rpx;
			border: 4rpx solid rgba(255, 255, 255, 0.3);
			border-radius: 50%;
			overflow: hidden;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				object-fit: cover;
			}
		}

		.sun_text {
			flex: 1;
			margin-left: 32rpx;

			.one {
				display: flex;
				align-items: center;
				margin-bottom: 12rpx;

				.name {
					font-weight: 600;
					font-size: 36rpx;
					text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
				}
			}

			.two {
				font-size: 26rpx;
				opacity: 0.9;
			}
		}

		.sz_img {
			display: flex;
			align-items: center;
			background: rgba(255, 255, 255, 0.15);
			padding: 12rpx 24rpx;
			border-radius: 30rpx;
			backdrop-filter: blur(10px);

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 12rpx;
			}

			.js_all {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				opacity: 0.9;

				.jf {
					font-size: 40rpx;
					font-weight: 600;
					margin-left: 8rpx;
				}
			}
		}
	}

	//签到内容
	.contain_box {
		width: 92%;
		margin: 0 4%;
		margin-top: -120rpx;
		position: relative;
		background: #fff;
		border-radius: 24rpx;
		padding: 32rpx;
		box-shadow: 0 4rpx 30rpx rgba(0, 0, 0, 0.05);

		.title {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 32rpx;

			.one {
				color: #333;
				font-weight: 600;
				font-size: 32rpx;
			}

			.two {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				color: #666;
				padding: 8rpx 16rpx;
				border-radius: 20rpx;
				background: #F5F6F7;
				transition: all 0.3s ease;

				&:active {
					transform: scale(0.95);
					background: #EEEEEE;
				}

				image {
					width: 28rpx;
					height: 28rpx;
					margin-left: 8rpx;
				}
			}
		}

		.jf_box {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			gap: 24rpx;

			.item_qd {
				width: calc((100% - 72rpx) / 4);
				height: 140rpx;
				background: linear-gradient(135deg, #EEF5F3 0%, #E5F0ED 100%);
				color: #498FFF;
				text-align: center;
				position: relative;
				border-radius: 16rpx;
				transition: all 0.3s ease;
				overflow: hidden;

				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: linear-gradient(135deg, rgba(73, 143, 255, 0.1) 0%, transparent 100%);
					opacity: 0;
					transition: opacity 0.3s ease;
				}

				&:active {
					transform: scale(0.98);

					&::before {
						opacity: 1;
					}
				}

				.item_center {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 100%;
					padding: 20rpx;

					.day {
						font-size: 26rpx;
						margin-bottom: 12rpx;
						font-weight: 500;
					}

					.pic {
						margin: 16rpx 0;

						image {
							width: 52rpx;
							height: 52rpx;
							transition: transform 0.3s ease;
						}
					}

					.num {
						font-size: 28rpx;
						font-weight: 500;
					}
				}
			}

			.item_wqd {
				background: linear-gradient(135deg, #F2F2F2 0%, #EEEEEE 100%);
				color: #999;
				opacity: 0.8;

				&::before {
					display: none;
				}
			}
		}
	}
</style>